import styled from "styled-components";
import React, { useContext } from "react";
import { MdOutlineLightMode, MdDarkMode } from "react-icons/md"
import ThemeContext from "../../context/themeContext";
import { useDispatch, useSelector } from "react-redux";
import {toggleTheme} from "@/store/themeSlice"
const ThemeToggleContainer = styled.div.attrs(({theme})=>theme)`
  color:${props=>props.textColor};
  font-size:.5rem;
  svg{
    cursor: pointer;
  }
`
export default React.memo(function ThemeToggle () {
  // const { theme, handleToggleTheme } = useContext(ThemeContext);
  const theme = useSelector(state=>state.theme.theme)
  const dispatch = useDispatch();
  return <ThemeToggleContainer>
    {theme === 'light' && <MdOutlineLightMode onClick={() => dispatch(toggleTheme("dark"))} />}
    {theme === 'dark' && <MdDarkMode onClick={() => dispatch(toggleTheme("light"))} />}
  </ThemeToggleContainer>
})
